<template>
  <view>
    <!-- 头部导航栏 -->
    <view class="top-navigate bg-yellow" style="padding: 53px 10px 15px 10px;">
      <navigator class="content cuIcon-back text-xl" style="font-weight: 700;" hover-class="none" url="../../pages/index/index"
        open-type="redirect">
      </navigator>
      <view class="text-xl top-navigate-title">支付成功</view>
    </view>
    <!-- 支付成功显示区域 -->
    <view class="pay-success-box">
      <view class="logo cuIcon-check"></view>
      <view class="pay-message">订单支付成功</view>
      <view class="pay-method cuIcon-pay">
        <view>支付方式</view>
        <view class="text-red">微信支付</view>
      </view>
      <view class="pay-price cuIcon-recharge">
        <view>支付金额</view>
        <view class="text-red">￥{{price}}</view>
      </view>
      <view class="btn-order-index">
        <button class="cu-btn bg-green lg" @click="checkOrderInfo(item)">查看订单</button>
        <button class="cu-btn bg-red margin-tb-sm lg" @click="goHome">回到首页</button>
      </view>
    </view>
    <!-- tips -->
    <view class="tips">
      <text>温馨提示：</text>
      <view>您的订单提交成功，请注意接听跑腿骑手来电。</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        orderId:'',
        price:0
      };
    },
    onLoad(options) {
      console.log(options);
      this.orderId = options.orderId;
      this.price = options.price;
    },
    methods:{
      goHome(){
        uni.navigateTo({
          url:'/pages/index/index'
        })
      },
      checkOrderInfo(item){
        if (getCurrentPages().length >= 10) { 
          uni.redirectTo({
            url: '/subpkg/order-detail/order-detail?orderId=' + JSON.stringify(this.orderId),
          })
        } else {
          uni.navigateTo({
            url: '/subpkg/order-detail/order-detail?orderId=' + JSON.stringify(this.orderId),
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  .top-navigate {
    display: flex;
    justify-content: left;
    align-items: center;

    .top-navigate-title {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
      font-weight: bold;
    }

    .top-navigate-address {
      width: 150px;
      margin: 0 5px;
    }
  }
  
  .pay-success-box{
    margin-top: 50px;
    height: 300px;
    padding: 30px 50px;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: darkgray;
    
    .logo{
      color: green;
      font-size: 50px;
      font-weight: 700;
    }
    
    .pay-message{
      font-size: 18px;
    }
    
    .pay-method,
    .pay-price{
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
    }
    
    .pay-method>view {
      font-size:14px;
      margin: 0 5px;
    }
    
    .pay-price>view {
      font-size:14px;
      margin: 0 5px;
    }
    
    .btn-order-index>button{
      margin:0 5px;
    }

  }
  
  .pay-success-box>view{
    margin: 10px;
  }
 
 
 .tips{
   margin: 15px;
 }
</style>